<template>
  <div id="submitOrder">
    <TopSubfield>我是顶部</TopSubfield>
    <div class="indent">
      <div class="indent-top">
        <img class="indetImg" src="/static/img/signLogo.7c2198e.png" alt>
        <div class="process">
          <el-steps :active="active" finish-status="success">
            <el-step title="1 提交订单"></el-step>
            <el-step title="2 确认支付"></el-step>
            <el-step title="3 完成购买"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="fulfill">
        <div class="fulfill-matter">
          <p>
            <i class="icon iconfont icon-right"></i>您已成功购买“葡萄什么嘛，享7兑换券
          </p>
          <p>您可以随时进入“
            <span>我的订单</span>”查看享7券，到店出示享7券即可使用。
          </p>
          <p>扫描二维码<span>保存到手机</span></p>
          <img src="//cdn.pinduoduo.com/assets/img/baidu_cpc_sweep_v1.png" alt srcset>
        </div>
      </div>
    </div>
    <bottomSynopsis>我是底部公共部分</bottomSynopsis>
  </div>
</template>

<script>
import TopSubfield from "@/components/top/TopSubfield"; //公共头部
import bottomSynopsis from "@/components/bottom/bottomSynopsis"; //公共底部
export default {
  name: "submitOrder",
  data() {
    return {
      active: 0
    };
  },
  components: {
    TopSubfield,
    bottomSynopsis
  },
  methods: {
    notarize() {
      if (this.active++ > 2) this.active = 0; //屏蔽下面的跳转地址便可模拟支付流程
      this.$router.push("/confirmPayment");
    }
  }
};
</script>

<style lang="less" scoped>
#submitOrder {
  width: 100%;
  background-color: #ffffff;
  .indent {
    width: 1340px;
    margin: 0 auto;
    padding-bottom: 100px;
    .indent-top {
      padding-top: 20px;
      .indetImg {
        display: inline-block;
        width: 165px;
        height: 57px;
        vertical-align: middle;
      }
      .process {
        width: 500px;
        padding-left: 80px;
        display: inline-block;
        vertical-align: middle;
        .el-steps--simple {
          background-color: #ffffff;
        }
      }
    }
    .fulfill {
      width: 100%;
      padding: 40px 0px 0px 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      .fulfill-matter {
        p{
            padding-bottom: 14px;
        }
        p:nth-child(1) {
          font-size: 18px;
          font-weight: 600;
          vertical-align: middle;
          i {
            color: green;
            font-size: 22px;
            vertical-align: middle;
            padding-right: 8px;
            margin-bottom: 6px;
          }
        }
        p:nth-child(2){
            color: #706B71;
            span{
                color: #409E97;
                cursor: pointer;
            }
        }
        p:nth-child(3){
            color: #706B71;
            span{
                font-weight: 600;
            }
        }
        img{
            padding-left: 80px;
        }
      }
    }
  }
}
</style>


